<template>
  <div class="order-page">
    <LayoutContainer>
      <div class="order-list">
        <OrderItem v-if="order.length > 0" v-for="item in order" :obj="item"></OrderItem>
        <el-empty v-else description="no more order" />
      </div>
    </LayoutContainer>
  </div>
</template>

<script setup>
import LayoutContainer from '@/layout/LayoutContainer.vue'
import OrderItem from './components/OrderItem.vue'
import { ref } from 'vue'
import { getOrder } from '@/api/shop'

const order = ref([])

const getAllOrder = async () => {
  const { data } = (await getOrder()).data
  order.value = data
}

getAllOrder()
</script>

<style scoped less="scss">
.order-page {
  .order-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    margin: 70px auto;
    padding: 10px 0 10px 0;
    min-height: 600px;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
  }
}
</style>
